<template>
  <div class="list">
    <van-pull-refresh
      v-model="isLoading"
      :success-text="refreshText"
      @refresh="onRefresh"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        @load="onLoad"
      >
        <AeticleLisrItem
          v-for="item in list"
          :key="item.art_id"
          :articleItem="item"
          @show="notLike"
        />
      </van-list>
    </van-pull-refresh>
    <!-- 不感兴趣弹层 -->
    <van-dialog
      v-model="showDia"
      :show-confirm-button="false"
      :close-on-click-overlay="true"
      :beforeClose="
        (action, done) => {
          showLoser = false
          done()
        }
      "
    >
      <template>
        <div class="select">
          <div @click="notLikeArticles">不敢兴趣</div>
          <div @click="showLoser = true">
            举报反馈内容 <van-icon name="arrow" />
          </div>
          <!-- <div>拉黑作者</div> -->
        </div>
      </template>
    </van-dialog>
    <!-- 反馈垃圾内容 -->
    <van-dialog
      v-model="showLoser"
      :show-confirm-button="false"
      :close-on-click-overlay="true"
      :overlay="true"
    >
      <template>
        <div class="selectLoser">
          <div @click="showLoser = false">
            <van-icon name="arrow-left" />返回
          </div>
          <div @click="warnArticle(0)">其他问题</div>
          <div @click="warnArticle(1)">标题夸张</div>
          <div @click="warnArticle(2)">低俗色情</div>
          <div @click="warnArticle(3)">错别字多</div>
          <div @click="warnArticle(4)">旧闻重复</div>
          <div @click="warnArticle(5)">广告软文</div>
          <div @click="warnArticle(6)">内容不实</div>
          <div @click="warnArticle(7)">涉嫌违法</div>
          <div @click="warnArticle(8)">侵权</div>
        </div>
      </template>
    </van-dialog>
  </div>
</template>

<script>
import AeticleLisrItem from './art-item.vue'
import { getarticle, notLikeArticle, warnArticle } from '@/api/article'
export default {
  name: 'ArticleList',
  props: {
    channel: {
      type: Object,
      require: true
    }
  },
  components: {
    AeticleLisrItem
  },
  data () {
    return {
      timestamp: Date.now(),
      list: [],
      loading: false, // 加载中
      finished: false, // 加载完成
      error: false, // 加载错误
      isLoading: false, // 下拉刷新
      showDia: false, // 不喜欢文章显示控制
      showLoser: false, // 反馈垃圾内容显示控制
      currentId: '', // 不喜欢小图标点击文章的ID
      refreshText: '刷新成功'
    }
  },
  methods: {
    // 获取文章列表
    async onLoad () {
      try {
        const { data } = await getarticle({
          channel_id: this.channel.id,
          timestamp: this.timestamp
        })
        this.list = [...this.list, ...data.results]
        this.loading = false
        if (data.results.length !== 10) {
          // 数据没了
          this.finished = true
        } else {
          this.timestamp = data.pre_timestamp
        }
      } catch (err) {
        this.error = true
        this.loading = false
      }
    },
    // 下拉刷新
    async onRefresh () {
      this.timestamp = Date.now()
      try {
        const { data } = await getarticle({
          channel_id: this.channel.id,
          timestamp: this.timestamp
        })
        this.list = data.results
        this.timestamp = data.pre_timestamp
      } catch (err) {
        this.refreshText = '刷新失败'
      }
      this.isLoading = false
    },
    // 对文章不喜接口
    async notLikeArticles () {
      try {
        await notLikeArticle({
          target: this.currentId
        })
        this.$toast('操作成功')
        // 删除不喜欢文章
        const index = this.list.findIndex(
          (item) => item.art_id === this.currentId
        )
        this.list.splice(index, 1)
      } catch (err) {
        this.$toast('操作失败')
      }
      this.showDia = false
    },
    // 不喜欢按钮点击
    notLike (id) {
      this.currentId = id
      this.showDia = true
    },
    // 举报文章
    async warnArticle (type) {
      try {
        await warnArticle({
          target: this.currentId,
          type: type
        })
        this.$toast('举报成功')
        // 删除举报文章
        const index = this.list.findIndex(
          (item) => item.art_id === this.currentId
        )
        this.list.splice(index, 1)
      } catch (err) {
        this.$toast('举报失败')
      }
      this.showDia = false
      this.showLoser = false
    }
  }
}
</script>

<style scoped lang="scss">
// 让每个分类文章滚动不想其他分类文章
.list {
  height: 572px;
  overflow: auto;
}
.select {
  padding: 10px;
  div {
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
}
.selectLoser {
  padding: 10px;
  div {
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
}
</style>
